<template>
	<view class="diary">
		<!-- <view class="diary-margin"></view> -->
		<scroll-view scroll-y="true" class="diary-item" @scrolltolower="PullUpLoading">
			<view class="diary-item-list">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view class="item-info">
						<view><u-image width="160rpx" height="160rpx" :src="item.cover" border-radius="12" :lazy-load="true"></u-image></view>
						<view class="info-context">
							<view class="context-title">{{item.title}}</view>
							<view>{{item.createdAt}}</view>
							<view class="context-operation">
								<view :class="item.top?'operation-btn active':'operation-btn'" @click="setTop(item.id)">{{!item.top?'置顶':'已置顶'}}</view>
								<view class="operation-btn" @click="del(item.id)">删除</view>
								<view class="operation-btn" @click="setUrl(item.id,item.type)">编辑</view>
							</view>
						</view>
					</view>
					<view class="item-message">
						<view class="message-item">
							<view class="item-num">{{item.comments}}</view>
							<view class="">评论</view>
						</view>
						<view class="message-item">
							<view class="item-num">{{item.collects}}</view>
							<view class="">收藏</view>
						</view>
						<view class="message-item">
							<view class="item-num">{{item.likes}}</view>
							<view class="">云吸</view>
						</view>
						<view class="message-item">
							<view class="item-num">{{item.shares}}</view>
							<view class="">分享</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="onShow" style="width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: center;color: #bcbcbc;">
				到底了，没有更多了~
			</view>
			<view class="adopt-empty" v-if="dataList.length === 0 && loading === false">
				<u-image width="400rpx" height="280rpx" src="@/static/user/none1.png" :lazy-load="true"></u-image>
				<view class="empty-text">暂无数据~</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				total: 0,
				page: 1,
				size: 10,
				onShow: false,
				dataList: [],
				loading: true
			}
		},
		onPullDownRefresh() {
			this.onShow = false
			this.page = 1
			this.getData()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods:{
			setTop(e){
				let self = this
				self.$request(self.commonApi.opsTop+e,'GET').then(res=>{
					this.getData()
				})
			},
			setUrl(id,type){
				uni.navigateTo({
					url: '../../diary/PublishedDiary/PublishedDiary?type='+type+'&id='+id
				})
			},
			PullUpLoading(){
				let self = this
				if(self.dataList.length < self.total){
					self.page += 1
					self.$request(self.commonApi.diaryPage+self.page+'/'+self.size,'GET').then(res=>{
						let data = res.data.data.result
						data.forEach(item=>{
							self.dataList.push(item)
						})
						
					})
				}else{
					self.onShow = true
				}
			},
			del(e){
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除日记吗',
					success: function (res) {
						if (res.confirm) {
							self.$request(self.commonApi.diaryDelete+e,'POST').then(res=>{
							uni.showToast({
									title: '删除成功',
									duration:500,
									icon: 'none'
								})
							})
							setTimeout(()=>{
								self.page = 1
								self.getData()
							},500)
						} else if (res.cancel) {
						}
					}
				});
			},
			// 加载中
			showLoading () {
				this.loading = true
				uni.showLoading({
				    title: '正在加载中',
					mask: true
				});
			},
			// 加载成功
			hideLoading () {
				uni.showToast({
				    title: '加载成功',
					icon: 'success',
					mask: true,
					complete: () =>{
						uni.hideLoading();
						this.loading = false
					}
				});
			},
			getData(){
				this.page = 1
				let self = this
				this.showLoading()
				self.$request(self.commonApi.diaryPage+self.page+'/'+self.size,'GET').then(res=>{
					console.log(res)
					self.total = res.data.data.meta.total
					let data = res.data.data.result
					self.dataList = data
					this.hideLoading()
				})
			}
		},
		mounted() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.diary {
		.diary-margin {
			width: 750rpx;
			height: 2rpx;
			border: 2rpx solid #F6F6F6;
		}
		.diary-item {
			width: 100%;
			height: calc(100vh - 10rpx);
			margin-top: 10rpx;
			.diary-item-list{
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;
			}
			.item {
				width: 700rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				border-bottom: 2rpx solid #F6F6F6;
				padding-top: 30rpx;
				.item-info {
					display: flex;
					.info-context {
						width: 514rpx;
						margin-left: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						.context-title {
							width: 514rpx;
							font-size: 28rpx;
							font-weight: 700;
							color: #333333;
							line-height: 40rpx;
							overflow:hidden;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
						.context-operation {
							display: flex;
							justify-content: space-between;
							.operation-btn {
								width: 120rpx;
								height: 44rpx;
								border-radius: 30rpx;
								border: 2rpx solid #E2E2E4;
								font-size: 26rpx;
								font-weight: 400;
								color: #959595;
								line-height: 36rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.active {
								background: #FF9A00;
								color: #FFFFFF;
								border: none;
							}
						}
					}
				}
				.item-message {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 34rpx 0;
					.message-item {
						display: flex;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 28rpx;
						.item-num {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.adopt-empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 200rpx;
			.empty-text {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
				letter-spacing: 2rpx;
				padding-top: 60rpx;
			}
		}
	}
</style>
